<template>
  <div>
    <el-tooltip
      class="item"
      effect="dark"
      content="主题配置"
      placement="bottom"
    >
      <el-icon
        :style="{
          color: navIsTo
            ? 'var(--menuColorFont)'
            : 'var(--navColorFont)',
        }"
        @click="openSetting"
        class="llt-icon-size"
      >
        <setting
      /></el-icon>
    </el-tooltip>

    <!-- 系统配置 end -->
    <el-drawer title="项目配置" v-model="drawerBool">
      <div class="header-setting-drawer">
        <el-alert
          title="主题色建议深色调，防止菜单鼠标悬浮字体看不清"
          type="error"
        />
        <!-- <el-divider content-position="center"><h4>是否通栏</h4></el-divider>
        <div class="aic jcc mt30">
          <el-switch 
          :model-value="$store.state.isFull" @change="changeIsFull">
          </el-switch>
        </div>
        <el-divider content-position="center"><h4>菜单是否顶部</h4></el-divider>
        <div class="aic jcc mt30">
          <el-switch
            :model-value="$store.state.navIsTo"
            @change="changenavIsTo"
          >
          </el-switch>
        </div> -->
        <el-divider content-position="center"><h4>主题颜色</h4></el-divider>
        <div class="mt30">
          <!-- 颜色选择器 -->
          <el-color-picker
            popper-class="header-el-color-picker"
            color-format="rgb"
            show-alpha
            v-model="state.colors.primary"
            @change="changeThemeColor"
          ></el-color-picker>
        </div>
        <el-divider content-position="center"
          ><h4>菜单title颜色</h4></el-divider
        >
        <div class="mt30">
     
          <el-color-picker
            popper-class="header-el-color-picker"
            color-format="rgb"
            show-alpha
            v-model="state.colors.menuTitle"
            @change="changeThemeColorTitle"
          ></el-color-picker>
        </div>
        <el-divider content-position="center"><h4>顶栏主题颜色</h4></el-divider>

        <div class="mt30 header-theme-color-box aic">
          <div>
            <h4>导航字体颜色</h4>
            <el-color-picker
              popper-class="header-el-color-picker"
              color-format="rgb"
              show-alpha
              v-model="state.colors.navColorFont"
              @change="changeThemeColornavColorFont"
            ></el-color-picker>
          </div>

          <div class="ml15">
            <h4>导航背景颜色</h4>
            <el-color-picker
              popper-class="header-el-color-picker"
              color-format="rgb"
              show-alpha
              v-model="state.colors.navColorBg"
              @change="changeThemeColornavColorBg"
            ></el-color-picker>
          </div>
        </div>
        <el-divider content-position="center"
          ><h4>左侧菜单主题颜色</h4></el-divider
        >

        <div class="mt30 header-theme-color-box aic">
          <div class="mt30 header-theme-color-box aic">
                 <div>
              <h4>字体颜色</h4>
              <el-color-picker
                popper-class="header-el-color-picker"
                color-format="rgb"
                show-alpha
                v-model="state.colors.menuColorFont"
                @change="changeThemeColormenuColorFont"
              ></el-color-picker>
            </div>
            <div>
              <h4>激活颜色</h4>
              <el-color-picker
                popper-class="header-el-color-picker"
                color-format="rgb"
                show-alpha
                v-model="state.colors.activeColor"
                @change="changeThemeColormenuActiveColor"
              ></el-color-picker>
            </div>

            <div class="ml15">
              <h4>菜单背景颜色</h4>
              <el-color-picker
                popper-class="header-el-color-picker"
                color-format="rgb"
                show-alpha
                v-model="state.colors.menuColorBg"
                @change="changeThemeColormenuColorBg"
              ></el-color-picker>
            </div>
          </div>
        </div>
         <!-- <el-divider content-position="center"
          ><h4>页面背景色</h4></el-divider
        >
               <div class="mt30 header-theme-color-box aic">
          <div class="mt30 header-theme-color-box aic">
            <div>
              <h4>内容背景色</h4>
              <el-color-picker
                popper-class="header-el-color-picker"
                color-format="rgb"
                show-alpha
                v-model="state.colors.bodybg"
                @change="changeThemeColorBodyBg"
              ></el-color-picker>
            </div>

            <div class="ml15">
              <h4>菜单背景颜色</h4>
              <el-color-picker
                popper-class="header-el-color-picker"
                color-format="rgb"
                show-alpha
                v-model="state.colors.menuColorBg"
                @change="changeThemeColormenuColorBg"
              ></el-color-picker>
            </div>
          </div>
        </div> -->
        <el-divider content-position="center"><h4>系统内置主题</h4></el-divider>

        <el-radio-group v-model="radioTheme" @change="changeTheme">
          <el-radio
            v-for="(item, index) in sysThemeList"
            :key="index"
            :label="item.type"
            >{{ item.name }}</el-radio
          >
        </el-radio-group>
        <div class="mt30">
          <el-button type="primary" class="w100" @click="handleInitThemeColor"
            >初始化配色方案</el-button
          >
        </div>
      </div>
    </el-drawer>
    <!-- 系统配置 end -->
  </div>
</template>

<script setup lang="ts">
import { ref,shallowRef, reactive, getCurrentInstance, computed } from "vue";
import { useRouter } from "vue-router";
import {
  setInitTheme,
  clearTheme,
  setActiveColor,
  switchColorMenu,
  switchColorNav,
  checkTheme,
} from "/@ts/hooks/theme";
import blueIndustryJSON from "/@ts/defaultValue/theme/blueIndustry";
import { ElLoading } from "element-plus";
import systemDefaultJSON from "/@ts/defaultValue/theme/systemDefault";
import { useIndexStore } from "/@ts/store";
import { getLocalStorage, setLocalStorage } from "/@ts/hooks/storage";
import { useCssVar } from "@vueuse/core";
import { sysThemeList } from "/@ts/defaultValue/theme";
const router = useRouter();
const store = useIndexStore();
 const navIsTo = computed(() => store.getNavIsTo);
 const primary=`rgba(${(getLocalStorage("themeColor") ||systemDefaultJSON.themeColor).join(",")})`
  const themeNav=getLocalStorage("themeNav") ||systemDefaultJSON.themeNav
    const themeMenu=getLocalStorage("themeMenu") ||systemDefaultJSON.themeNav
    const  navTitleColorFont= getLocalStorage("navTitleColorFont") ||systemDefaultJSON.navTitleColorFont
const state = reactive({
  colors: {
    primary: primary,
    navColorFont:themeNav.ColorFont,
    navColorBg: themeNav.ColorBg,
    menuColorFont:themeMenu.ColorFont,
    menuColorBg: themeMenu.ColorBg,
    activeColor:themeMenu.activeColor,
    menuTitle: navTitleColorFont,
  },
});
let drawerBool = shallowRef(false);
const openSetting = () => {
  drawerBool.value = true;
};
//页面主体背景色
const changeThemeColorBodyBg = (e: string) => {
  store.setBodybg( e);
}
//导航是否置顶
const changenavIsTo = (e: boolean) => {
  store.setnavIsTo( e);
};
//是否通栏
const changeIsFull = (e: boolean) => {
  store.setIsFull(e);
};

/**
 * 颜色选择索引值
 */

let radioTheme = ref(getLocalStorage("themeType") || systemDefaultJSON.type);


const changeTheme = (e: any) => {
  clearTheme();
  let themeData = sysThemeList.find((item) => item.type == e);
checkTheme(themeData.type)


};
//初始化配色方案
const handleInitThemeColor = () => {
  let loadingInstance = ElLoading.service({
    lock: true,
    text: "Loading",
    spinner: "el-icon-loading",
    background: "rgba(0, 0, 0, 0.7)",
  });
    clearTheme();
setInitTheme(systemDefaultJSON)
  store.setIsFull( false);
  setTimeout(() => {
    loadingInstance.close();
  }, 1000);
};
const colorPrimary = useCssVar("--el-color-primary");
//更换主题颜色
const changeThemeColor = (e: string) => {
  console.log('e :>> ', e);
  colorPrimary.value = e
  let numArr: string[] = [];
  e.match(/\d+/g)?.forEach((res: string) => {
    numArr.push(res);
  });
  store.setThemeColor( numArr);
};

////单独设置 导航title色 字体颜色
const changeThemeColorTitle = (e: string) => {
  store.setNavTitleColorFont(e);
};
////单独设置 导航色 背景颜色
const changeThemeColornavColorBg = (e: string) => {
  switchColorNav({
    ColorFont: store.getThemeCurrentNavItem.ColorFont,
    ColorBg: e,
  });
};
////单独设置 导航色 字体颜色
const changeThemeColornavColorFont = (e: string) => {
  switchColorNav({
    ColorFont: e,
    ColorBg: store.getThemeCurrentNavItem.ColorBg,
  });
};

const changeThemeColormenuActiveColor = (e: string) => {
  switchColorMenu({
    ColorFont: store.getThemeCurrentMenuItem.ColorFont,
    activeColor:e ,
    ColorBg: store.getThemeCurrentMenuItem.ColorBg,
  });
};
////单独设置 菜单色 背景颜色
const changeThemeColormenuColorBg = (e: string) => {
  switchColorMenu({
    ColorFont: store.getThemeCurrentMenuItem.ColorFont,
    activeColor: store.getThemeCurrentMenuItem.activeColor,
    ColorBg: e,
  });
};
////单独设置 菜单色 字体颜色
const changeThemeColormenuColorFont = (e: string) => {
  switchColorMenu({
    ColorFont: e,
      activeColor: store.getThemeCurrentMenuItem.activeColor,
    ColorBg: store.getThemeCurrentMenuItem.ColorBg,
  });
};

defineProps({

});
</script>

<style scoped lang="scss"></style>
